<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>资源编辑</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">
</head>
<body>

<form class="layui-form" action="" lay-filter="resource-form-edit" id="resource-form-edit" style="padding: 20px 30px 0 0;">
  <input type="hidden" id="id" name="id" th:value="${resource.id}"/>
  <input type="hidden" id="resId" name="resId" th:value="${resource.resId}"/>
  <div class="layui-form-item">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">资源标题</label>
      <div class="layui-input-block">
        <input type="text" name="title" th:value="${resource.title}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">资源名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" th:value="${resource.name}" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">父级资源</label>
      <div class="layui-input-block " id="parentId">
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">资源类型</label>
      <div class="layui-input-block">
        <select name="type" lay-filter="type-select" lay-verify="required">
          <option value="">请选择</option>
          <option th:each="map,idx:${resTypes}" th:value="${map.key}" th:selected="${map.key eq resource.type}" th:text="${map.value}"></option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">链接地址</label>
      <div class="layui-input-block">
        <input type="text" name="path" th:value="${resource.path}" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">权限标识</label>
      <div class="layui-input-block">
        <input type="text" name="mid" th:value="${resource.mid}" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">图标</label>
      <div class="layui-input-block">
        <input type="text" name="icon" th:value="${resource.icon}" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-block">
        <input type="text" name="seq" th:value="${resource.seq}" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-block" lay-filter="status">
        <input type="radio" name="status" value="Y" title="启用" th:checked="${ resource.status == null || resource.status == 'Y'} ? true">
        <input type="radio" name="status" value="N" title="禁用" th:checked="${ resource.status == 'N'} ? true">
      </div>
    </div>
  </div>

  <div class="layui-col-xs12 layui-col-sm6 layui-col-md6" style="margin-bottom: 25px;">
    <!--table 定义-->
    <table id="LAY-res-url-table" lay-filter="LAY-res-url-table"></table>
  </div>

  <div class="layui-form-item layui-layout-admin layui-hide">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <div class="layui-input-block" style="text-align:center;">
        <div class="layui-footer" style="left: 0;">
          <input type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-resource-front-submit" id="LAY-resource-front-submit" value="提交">
          <input type="button" class="layui-btn layui-btn-primary" lay-filter="LAY-resource-front-reset" id="LAY-resource-front-reset" value="重置">
        </div>
      </div>
    </div>
  </div>
</form>

<!-- 资源路径表格的toolbar模板 -->
<script type="text/html" id="res-url-table">
    <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
    <div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</script>

<!-- 状态模板 -->
<script type="text/html" id="tpl-switch-res-url-status">
  <input type="checkbox" name="status" value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用" {{ d.status == 'Y' ?'checked' : '' }}>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
  var parentId = [[${resource.parentId}]];
</script>
<script>
  layui.config({
    base: '/'
  }).extend({
    xmSelect: 'extend/xm-select/dist/xm-select'
  }).use(['index', 'xmSelect'], function () {
    let xmSelect = layui.xmSelect;
    let admin = layui.admin;
    let form = layui.form;
    let table = layui.table;
    let dropdown = layui.dropdown;

    //父级资源
    let parentId_select = xmSelect.render({
      el: '#parentId',
      name: 'parentId',
      layVerify: 'required',
      layVerType: 'msg',
      //显示为text模式
      model: {label: {type: 'text'}},
      //单选模式
      radio: true,
      //选中关闭
      clickClose: true,
      toolbar: {
        show: true,
        list: ['CLEAR']
      },
      filterable: true,
      //树
      tree: {
        show: true,
        //非严格模式
        strict: false,
        //展开所有节点
        expandedKeys: true,
      },
      data: []
    });

    admin.req({
      url: '/sys/resource/getSelectList',
      type: 'post',
      done: function (res) {
        parentId_select.update({
          data: res.data,
          autoRow: true,
        });
        //异步远程加载数据，需要重新设置
        parentId_select.changeExpandedKeys(true);
        if (parentId) {
          parentId_select.setValue([parentId]);
        }
      }
    });

    // admin.req({
    //   url: '/sys/resource/getResourcePageUrlList',
    //   type: 'post',
    //   data: {
    //     resId: layui.$('#resId').val()
    //   },
    //   done: function (res) {
    //     let resData = res.data;
    //     fncLoadResUrlTable(resData);
    //   }
    // });

    // fncLoadResUrlTable();

    //加载资源路径表格
    function fncLoadResUrlTable() {
      admin.req({
        url: '/sys/resource/getResourcePageUrlList',
        type: 'post',
        data: {
          resId: layui.$('#resId').val()
        },
        done: function (res) {
          let inst = table.render({
            elem: '#LAY-res-url-table',
            toolbar: '#res-url-table',
            defaultToolbar: [],
            cols: [
              [ //标题栏
                {type: 'checkbox', fixed: 'left'}
                // , {field: 'id', title: '主键ID', minWidth: 100, hide: true}
                , {field: 'resId', title: '资源编码', minWidth: 100, hide: true}
                , {field: 'title', title: '标题', minWidth: 100, edit: 'text'}
                , {field: 'href', title: '链接地址', minWidth: 150, edit: 'text'}
                , {
                field: 'status', title: '状态', minWidth: 60, templet: '#tpl-switch-res-url-status', unresize: true
              }
              ]
            ],
            data: res.data,
            //even: true,
            page: false
          });
        }
      });
    }

    // 头部工具栏事件
    table.on('toolbar(LAY-res-url-table)', function (obj) {
      let resId = layui.$('#resId').val();
      if (!resId) {
        resId = '';
      }
      // 根据不同的事件名进行相应的操作
      switch (obj.event) { // 对应模板元素中的 lay-event 属性值
        case 'add':
          let tableData1 = table.cache['LAY-res-url-table'];
          let n_data = {'resId': resId, 'title': '', 'href': '', 'status': 'Y'};
          if (tableData1) {
            tableData1.push(n_data);
          } else {
            tableData1 = n_data;
          }
          table.reload('LAY-res-url-table', {
            data: tableData1
          });
          break;
        case 'delete':
          let checkLines = table.checkStatus('LAY-res-url-table');
          //选中所有全部删除，直接重置数据为空
          if (checkLines.isAll) {
            table.reload('LAY-res-url-table', {
              data: []
            });
            break;
          }
          let lines_data = checkLines.data;
          if (!lines_data || lines_data.length < 1) {
            layer.msg('请选择要删除的行记录！');
            break;
          }
          let tmpTableData = table.cache['LAY-res-url-table'].filter(function (item) {
            //选中状态的删除，所以返回false
            if (item.LAY_CHECKED) {
              return false;
            }
            return true;
          });

          //重置表格数据
          table.reload('LAY-res-url-table', {
            data: tmpTableData
          });
          break;
      };
    });

    //表格编辑事件
    table.on('edit(LAY-res-url-table)', function(obj){
      let field = obj.field; // 得到修改的字段
      let value = obj.value // 得到修改后的值
      let oldValue = obj.oldValue // 得到修改前的值 -- v2.8.0 新增
      let data = obj.data // 得到所在行所有键值
      let col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.0 新增

      // 值的校验
      if(!value){
        layer.tips('值不能为空', this, {tips: 1});
        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
      }

      // // 更新当前缓存数据
      // var update = {};
      // update[field] = value;
      // obj.update(update, true); // 参数 true 为 v2.7 新增功能，即同步更新其他包含自定义模板并可能存在关联的列视图
    });

    //提交
    form.on('submit(LAY-resource-front-submit)', function (data) {
      let field = data.field;

      // let resUrls = new Array();
      // let tableCache = table.cache['LAY-res-url-table'];
      // for (let i = 0; i < tableCache.length; i++) {
      //   if (tableCache[i].title && tableCache[i].href) {
      //     let resUrl = {};
      //     // resUrl.id = tableCache[i].id;
      //     resUrl.resId = tableCache[i].resId;
      //     resUrl.title = tableCache[i].title;
      //     resUrl.href = tableCache[i].href;
      //     resUrl.status = tableCache[i].status;
      //
      //     resUrls.push(resUrl);
      //   }
      // }
      //
      // field.resUrls = resUrls;

      admin.req({
        url: '/sys/resource/save',
        type: 'post',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(field),
        done: function (res) {
          //执行成功
          let index = parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
          layer.msg(res.msg, {icon: 1, time: 1600}, function () {
            parent.layer.close(index);//关闭弹出层
          });
        }
      });

      return false; // 阻止默认 form 跳转
    });

    //重置表单 包含有下拉tree需要特殊处理
    layui.$("#LAY-resource-front-reset").click(function () {
      layui.$("#resource-form-edit")[0].reset();
      parentId_select.setValue(parentId ? [parentId] : []);

      //重置表格数据
      // fncLoadResUrlTable();
      form.render();
    });
  });
</script>
</body>
</html>